<template>
  <div class="login_body">
    <div class="bg"/>
    <div class="box">
      <div class="title">智慧园区-登录</div>
      <el-form ref="formLogin" :model="formData" :rules="formrules" >
        <el-form-item
          label="账号"
          prop="username"
        >

          <el-input v-model="formData.username"/>
        </el-form-item>

        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input v-model="formData.password" />
        </el-form-item>

        <el-form-item prop="remember">
          <el-checkbox v-model="remember">记住我</el-checkbox>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="login_btn" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { loginAPI } from '@/api/user'
export default {
  name: 'Login',
  data() {
    return {
      formData: {
        username: '',
        password: ''
      },
      remember: false,
      formrules: {
        username: [
          // 每一条规则对应一个对象
          // trigger:'blur' 用户名或密码不能为空
          { required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password:[
          {required:true,message:'请输入密码',trigger:'blur'}
        ]
      }
    }
  },
  created(){
    const localData=localStorage.getItem('form_key')
    this.formData.username=JSON.parse(localData).username//将对象变回字符串类型
    this.formData.password=JSON.parse(localData).password
  },
  methods:{
    login(){
      // console.log(this.$refs)
      this.$refs.formLogin.validate(async(flag) => {
        if (!flag) {
          return
        }
          // console.log('校验成功，开始登录')
         const res= await loginAPI(this.formData)
         console.log(res)

        // try{
          //试着运行语句，如果语句运行成功则继续执行该语句，如果有错误就会触发catch语句捕获错误          
          await this.$store.dispatch('user/loginAction', this.formData)
          if(this.remember){
            //把账号密码存起来,存到名字叫form_key的本地存储中
            localStorage.setItem('form_key',JSON.stringify(this.formData))//JSON.stringify将对象转化为字符串
          }else{
            localStorage.removeItem('form_key')
          }
          
          //获得当前页面的url地址中的参数
          if(this.$route.query.redirect){
            this.$router.push(this.$route.query.redirect)
          }else{
            this.$router.push('/')//router自己的路由  route浏览器的路由
          }

// }catch(err){
//           console.dir(err)
//           this.$message.error(err.response.data.msg)

//           // console.log(this)//this代表整个组件
//         }
      })
    }
  }

}

</script>

<style scoped lang="scss">
  .login_body {
    display: flex;
  }
  .bg {
    width: 60vw;
    height: 100vh;
    background: url('~@/assets/login-bg.svg') no-repeat;
    background-position: right top;
    background-size: cover;
  }
  .box {
    margin: 200px 10% 0;
    flex: 1;
    .title {
      padding-bottom: 76px;
      font-size: 26px;
      font-weight: 500;
      color: #1e2023;
    }
    ::v-deep() {
      .ant-form-item {
        display: flex;
        margin-bottom: 62px;
        flex-direction: column;
      }
      .ant-form-item-label label {
        font-size: 16px;
        color: #8b929d;
      }
      .ant-input,
      .ant-input-password {
        border-radius: 8px;
      }
    }
  }
  .login_btn{
    width: 100%;
  }
</style>
